<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String proname = request.getAttribute("proname") == null ? "" : String.valueOf(request.getAttribute("proname"));
    String originplace = request.getAttribute("originplace") == null ? "" : String.valueOf(request.getAttribute("originplace"));
    String levelname = request.getAttribute("levelname") == null ? "" : String.valueOf(request.getAttribute("levelname"));
    String minPrice = request.getAttribute("minPrice") == null ? "" : String.valueOf(request.getAttribute("minPrice"));
    String maxPrice = request.getAttribute("maxPrice") == null ? "" : String.valueOf(request.getAttribute("maxPrice"));
    String orderBy = request.getAttribute("orderBy") == null ? "" : String.valueOf(request.getAttribute("orderBy"));
    String orderType = request.getAttribute("orderType") == null ? "" : String.valueOf(request.getAttribute("orderType"));
    
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base href="<%= basePath %>"/>
    <title>茶叶选购</title>
        <!-- Element Plus 样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
        <!-- Vue3（Element Plus 依赖） -->
        <script src="https://unpkg.com/vue@3"></script>
        <!-- Element Plus JS -->
        <script src="https://unpkg.com/element-plus"></script>
    <style>
        body {
            background: #e8f5e9;
            font-family: 'Segoe UI', 'Arial', sans-serif;
            margin: 0;
            padding: 0;
        }
        .navbar {
            width: 100%;
            background: #43a047;
            color: #fff;
            padding: 0 0 0 0;
            box-shadow: 0 2px 8px rgba(76,175,80,0.08);
        }
        .navbar-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 60px;
        }
        .navbar-logo {
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 2px;
            color: #fff;
        }
        .navbar-links a {
            color: #fff;
            text-decoration: none;
            margin-left: 32px;
            font-size: 1.05rem;
            transition: color 0.2s;
        }
        .navbar-links a:hover {
            color: #c8e6c9;
        }
        .container {
            max-width: 1800px;
            margin: 32px auto;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(76,175,80,0.08);
            padding: 32px 40px;
        }
        h2 {
            color: #388e3c;
            margin-bottom: 24px;
            text-align: center;
        }
        .filter-bar {
            display: flex;
            gap: 18px;
            align-items: center;
            margin-bottom: 32px;
            justify-content: center;
        }
        .filter-bar input, .filter-bar select {
            padding: 8px 12px;
            border: 1px solid #b2dfdb;
            border-radius: 6px;
            font-size: 1rem;
            background: #f1f8e9;
        }
        .filter-bar input[type="submit"] {
            background: #66bb6a;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: background 0.2s;
        }
        .filter-bar input[type="submit"]:hover {
            background: #388e3c;
        }
        .product-list {
            display: flex;
            flex-wrap: wrap;
            gap: 32px;
            justify-content: center;
        }
        .product-card {
            background: #f9fff9;
            border: 1px solid #c8e6c9;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(76,175,80,0.06);
            width: 270px;
            padding: 24px 18px 18px 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s ease forwards;
        }
        .product-card:nth-child(1) { animation-delay: 0.1s; }
        .product-card:nth-child(2) { animation-delay: 0.2s; }
        .product-card:nth-child(3) { animation-delay: 0.3s; }
        .product-card:nth-child(4) { animation-delay: 0.4s; }
        .product-card:nth-child(5) { animation-delay: 0.5s; }
        .product-card:nth-child(6) { animation-delay: 0.6s; }
        .product-card:nth-child(7) { animation-delay: 0.7s; }
        .product-card:nth-child(8) { animation-delay: 0.8s; }
        .product-card:nth-child(9) { animation-delay: 0.9s; }
        .product-card:nth-child(10) { animation-delay: 1.0s; }
        .product-card:nth-child(11) { animation-delay: 1.1s; }
        .product-card:nth-child(12) { animation-delay: 1.2s; }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .product-card:hover {
            box-shadow: 0 8px 32px rgba(76,175,80,0.15);
            border: 1.5px solid #66bb6a;
            transform: translateY(-5px);
        }
        .product-img {
            background: #e0f2f1;
            border-radius: 8px;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }
        .product-title {
            font-size: 1.2rem;
            color: #388e3c;
            font-weight: bold;
            margin-bottom: 8px;
            text-align: center;
        }
        .product-price {
            color: #43a047;
            font-size: 1.1rem;
            margin-bottom: 8px;
        }
        .product-desc {
            color: #666;
            font-size: 0.98rem;
            margin-bottom: 10px;
            text-align: center;
            min-height: 40px;
        }
        .product-meta {
            font-size: 0.95rem;
            color: #888;
            margin-bottom: 6px;
        }
        .select-btn {
            margin-top: 12px;
            padding: 8px 24px;
            background: #66bb6a;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .select-btn:hover {
            background: #388e3c;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
        }
        .select-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(102, 187, 106, 0.2);
        }
        .pagination {
            margin: 32px 0 0 0;
            text-align: center;
        }
        .page-btn, .page-ellipsis {
            display: inline-block;
            margin: 0 4px;
            padding: 6px 16px;
            border-radius: 6px;
            font-size: 1rem;
            text-decoration: none;
            color: #388e3c;
            background: #e0f2f1;
            border: 1px solid #b2dfdb;
            transition: background 0.2s, color 0.2s, border 0.2s;
            cursor: pointer;
        }
        .page-btn.active, .page-btn:hover {
            background: #66bb6a;
            color: #fff;
            border: 1px solid #66bb6a;
        }
        .Page a, .Page strong {
            display: inline-block;
            margin: 0 4px;
            padding: 6px 16px;
            border-radius: 6px;
            font-size: 1rem;
            text-decoration: none;
            color: #ffffff;
            background: #8ceb76;
            border: 1px solid #e0e7ff;
            transition: background 0.2s, color 0.2s, border 0.2s;
        }
        .Page a:hover {
            background: #4ada2d;
            color: #fff;
            border: 1px solid #62ea45;
        }
        .Page .page-nav {
            background: #43a047;
            color: #fff;
            border: 1px solid #43a047;
            font-weight: bold;
        }
        .Page .page-nav:hover {
            background: #388e3c;
            border: 1px solid #388e3c;
        }

        /* 商品详情弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 1000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .modal-overlay.show {
            opacity: 1;
        }
        .modal-content {
            background: #fff;
            border-radius: 16px;
            padding: 32px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            transform: scale(0.7) translateY(-50px);
            opacity: 0;
            transition: all 0.3s ease;
        }
        .modal-overlay.show .modal-content {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
        .modal-close {
            position: absolute;
            top: 16px;
            right: 20px;
            font-size: 24px;
            cursor: pointer;
            color: #999;
            transition: color 0.2s;
        }
        .modal-close:hover {
            color: #333;
        }
        .product-detail {
            display: flex;
            gap: 24px;
            margin-bottom: 24px;
        }
        .product-detail-img {
            width: 200px;
            height: 200px;
            border-radius: 12px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .product-detail-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .product-detail-info {
            flex: 1;
        }
        .product-detail-title {
            font-size: 1.5rem;
            color: #388e3c;
            font-weight: bold;
            margin-bottom: 12px;
        }
        .product-detail-price {
            font-size: 1.3rem;
            color: #43a047;
            font-weight: bold;
            margin-bottom: 16px;
        }
        .product-detail-desc {
            color: #666;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        .product-detail-meta {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 20px;
        }
        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .meta-label {
            color: #888;
            font-size: 0.9rem;
        }
        .meta-value {
            color: #333;
            font-weight: 500;
        }
        .quantity-control {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }
        .quantity-btn {
            width: 36px;
            height: 36px;
            border: 1px solid #ddd;
            background: #fff;
            border-radius: 6px;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .quantity-btn:hover {
            border-color: #66bb6a;
            color: #66bb6a;
        }
        .quantity-input {
            width: 60px;
            height: 36px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
        }
        .add-to-cart-btn {
            background: #66bb6a;
            color: #fff;
            border: none;
            padding: 12px 32px;
            border-radius: 8px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .add-to-cart-btn:hover {
            background: #388e3c;
        }

        /* 购物车按钮 */
        .cart-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: #66bb6a;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(102, 187, 106, 0.3);
            transition: all 0.3s;
            z-index: 999;
        }
        .cart-btn:hover {
            background: #388e3c;
            transform: scale(1.1) rotate(5deg);
        }
        .cart-btn:active {
            transform: scale(0.95);
        }
        .cart-icon {
            color: #fff;
            font-size: 24px;
        }
        .cart-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #f44336;
            color: #fff;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }

        /* 购物车侧边栏 */
        .cart-sidebar {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100vh;
            background: #fff;
            box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 1001;
            display: flex;
            flex-direction: column;
            transform: translateX(0);
        }
        .cart-sidebar.open {
            right: 0;
            transform: translateX(0);
        }
        .cart-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cart-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
        }
        .cart-close {
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }
        .cart-items {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        .cart-item {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .cart-item-img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .cart-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .cart-item-info {
            flex: 1;
        }
        .cart-item-name {
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        .cart-item-price {
            color: #43a047;
            font-weight: 500;
        }
        .cart-item-quantity {
            margin-top: 8px;
            color: #666;
            font-size: 0.9rem;
        }
        .cart-item-remove {
            color: #f44336;
            cursor: pointer;
            font-size: 14px;
            margin-top: 4px;
        }
        .cart-footer {
            padding: 20px;
            border-top: 1px solid #eee;
            background: #f9f9f9;
        }
        .cart-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            font-size: 1.1rem;
            font-weight: bold;
        }
        .checkout-btn {
            width: 100%;
            background: #66bb6a;
            color: #fff;
            border: none;
            padding: 12px;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .checkout-btn:hover {
            background: #388e3c;
        }
        .empty-cart {
            text-align: center;
            color: #999;
            padding: 40px 20px;
        }
        
        /* 页面加载动画 */
        .container {
            animation: pageLoad 0.8s ease-out;
        }
        
        @keyframes pageLoad {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 筛选栏动画 */
        .filter-bar {
            animation: slideInDown 0.6s ease-out 0.2s both;
        }
        
        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
<div class="navbar">
    <div class="navbar-content">
        <div class="navbar-logo">茶叶商城</div>
        <div class="navbar-links">
            
        </div>
    </div>
</div>
<div class="container">
    <h2>茶叶选购</h2>
    <!-- 筛选/搜索区 -->
    <form class="filter-bar" method="get" action="UserIndexServlet">
        <input type="text" name="proname" placeholder="搜索茶叶名称" value="<%= proname %>">
        <select name="originplace">
            <option value="">产地</option>
            <option value="北京" <%= "北京".equals(originplace) ? "selected" : "" %>>北京</option>
            <option value="天津" <%= "天津".equals(originplace) ? "selected" : "" %>>天津</option>
            <option value="河北" <%= "河北".equals(originplace) ? "selected" : "" %>>河北</option>
            <option value="山西" <%= "山西".equals(originplace) ? "selected" : "" %>>山西</option>
            <option value="内蒙古" <%= "内蒙古".equals(originplace) ? "selected" : "" %>>内蒙古</option>
            <option value="辽宁" <%= "辽宁".equals(originplace) ? "selected" : "" %>>辽宁</option>
            <option value="吉林" <%= "吉林".equals(originplace) ? "selected" : "" %>>吉林</option>
            <option value="黑龙江" <%= "黑龙江".equals(originplace) ? "selected" : "" %>>黑龙江</option>
            <option value="上海" <%= "上海".equals(originplace) ? "selected" : "" %>>上海</option>
            <option value="江苏" <%= "江苏".equals(originplace) ? "selected" : "" %>>江苏</option>
            <option value="浙江" <%= "浙江".equals(originplace) ? "selected" : "" %>>浙江</option>
            <option value="安徽" <%= "安徽".equals(originplace) ? "selected" : "" %>>安徽</option>
            <option value="福建" <%= "福建".equals(originplace) ? "selected" : "" %>>福建</option>
            <option value="江西" <%= "江西".equals(originplace) ? "selected" : "" %>>江西</option>
            <option value="山东" <%= "山东".equals(originplace) ? "selected" : "" %>>山东</option>
            <option value="河南" <%= "河南".equals(originplace) ? "selected" : "" %>>河南</option>
            <option value="湖北" <%= "湖北".equals(originplace) ? "selected" : "" %>>湖北</option>
            <option value="湖南" <%= "湖南".equals(originplace) ? "selected" : "" %>>湖南</option>
            <option value="广东" <%= "广东".equals(originplace) ? "selected" : "" %>>广东</option>
            <option value="广西" <%= "广西".equals(originplace) ? "selected" : "" %>>广西</option>
            <option value="海南" <%= "海南".equals(originplace) ? "selected" : "" %>>海南</option>
            <option value="重庆" <%= "重庆".equals(originplace) ? "selected" : "" %>>重庆</option>
            <option value="四川" <%= "四川".equals(originplace) ? "selected" : "" %>>四川</option>
            <option value="贵州" <%= "贵州".equals(originplace) ? "selected" : "" %>>贵州</option>
            <option value="云南" <%= "云南".equals(originplace) ? "selected" : "" %>>云南</option>
            <option value="西藏" <%= "西藏".equals(originplace) ? "selected" : "" %>>西藏</option>
            <option value="陕西" <%= "陕西".equals(originplace) ? "selected" : "" %>>陕西</option>
            <option value="甘肃" <%= "甘肃".equals(originplace) ? "selected" : "" %>>甘肃</option>
            <option value="青海" <%= "青海".equals(originplace) ? "selected" : "" %>>青海</option>
            <option value="宁夏" <%= "宁夏".equals(originplace) ? "selected" : "" %>>宁夏</option>
            <option value="新疆" <%= "新疆".equals(originplace) ? "selected" : "" %>>新疆</option>
            <option value="香港" <%= "香港".equals(originplace) ? "selected" : "" %>>香港</option>
            <option value="澳门" <%= "澳门".equals(originplace) ? "selected" : "" %>>澳门</option>
            <option value="台湾" <%= "台湾".equals(originplace) ? "selected" : "" %>>台湾</option>
        </select>
        <select name="levelid">
            <option value="">等级</option>
            <% 
                java.util.List levels = (java.util.List)request.getAttribute("levels");
                if(levels != null){
                    for(Object obj : levels){
                        Bean.UserIndex.Level level = (Bean.UserIndex.Level)obj;
            %>
            <option value="<%= level.getLevelname() %>" <%= level.getLevelname() != null && level.getLevelname().equals(levelname) ? "selected" : "" %>><%= level.getLevelname() %></option>
            <%      }
                }
            %>
        </select>
        <input type="number" name="minPrice" placeholder="最低价" min="0" style="width:90px;" value="<%= minPrice %>">
        <span style="color:#388e3c;">-</span>
        <input type="number" name="maxPrice" placeholder="最高价" min="0" style="width:90px;" value="<%= maxPrice %>">
        <select name="orderBy">
            <option value="" <%= "".equals(orderBy) ? "selected" : "" %>>排序字段</option>
            <option value="productionyear" <%= "productionyear".equals(orderBy) ? "selected" : "" %>>年份</option>
            <option value="price" <%= "price".equals(orderBy) ? "selected" : "" %>>价格</option>
        </select>
        <select name="orderType">
            <option value="" <%= "".equals(orderType) ? "selected" : "" %>>排序类型</option>
            <option value="asc" <%= "asc".equals(orderType) ? "selected" : "" %>>升序</option>
            <option value="desc" <%= "desc".equals(orderType) ? "selected" : "" %>>降序</option>
        </select>
        <input type="submit" value="筛选">
    </form>
    <!-- 商品列表 -->
    <div class="product-list">
        <c:forEach items="${products}" var="p">
            <div class="product-card">
                <div class="product-img">
                    <img src="${p.src}" alt="茶叶图片">
                </div>
                <div class="product-title">${p.proname}</div>
                <div class="product-price">￥${p.price} / 500g</div>
                <div class="product-desc">
                    产地：${p.originplace} | 
                    <c:if test="${not empty p.productionyear}">${p.productionyear}年</c:if> | 
                    ${p.levelname} | 
                    库存：${p.quantity}
                </div>
                <div class="product-meta">简介：${p.description}</div>
                <button class="select-btn" onclick="showProductDetail(${p.id}, '${p.proname}', ${p.price}, '${p.originplace}', '${p.levelname}', ${p.productionyear}, ${p.quantity}, '${p.description}')">选购</button>
            </div>
        </c:forEach>
        <c:if test="${empty products}">
            <div style="color:#888;text-align:center;width:100%;">暂无商品</div>
        </c:if>
    </div>
    <!-- 分页区 -->
    <div class="pagination Page">
        <a href="UserIndexServlet?currentPage=${currentPage-1>0?currentPage-1:1}" class="page-nav">上一页</a>
        <c:forEach begin="1" end="${totalPage}" var="i">
            <c:choose>
                <c:when test="${i == currentPage}">
                    <strong class="page-btn active">${i}</strong>
                </c:when>
                <c:otherwise>
                    <a href="UserIndexServlet?currentPage=${i}" class="page-btn">${i}</a>
                </c:otherwise>
            </c:choose>
        </c:forEach>
        <a href="UserIndexServlet?currentPage=${currentPage+1<=totalPage?currentPage+1:totalPage}" class="page-nav">下一页</a>
    </div>
</div>

<!-- 商品详情弹窗 -->
<div class="modal-overlay" id="productModal">
    <div class="modal-content">
        <span class="modal-close" onclick="closeProductModal()">&times;</span>
        <div class="product-detail">
            <div class="product-detail-img">
                <img src="images/yellow-tea-2443920_1280.jpg" alt="茶叶图片" id="modalProductImg">
            </div>
            <div class="product-detail-info">
                <div class="product-detail-title" id="modalProductName"></div>
                <div class="product-detail-price" id="modalProductPrice"></div>
                <div class="product-detail-desc" id="modalProductDesc"></div>
                <div class="product-detail-meta">
                    <div class="meta-item">
                        <span class="meta-label">产地：</span>
                        <span class="meta-value" id="modalProductOrigin"></span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">等级：</span>
                        <span class="meta-value" id="modalProductLevel"></span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">年份：</span>
                        <span class="meta-value" id="modalProductYear"></span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">库存：</span>
                        <span class="meta-value" id="modalProductStock"></span>
                    </div>
                </div>
                <div class="quantity-control">
                    <button class="quantity-btn" onclick="changeQuantity(-1)">-</button>
                    <input type="number" class="quantity-input" id="modalQuantity" value="1" min="1" max="999">
                    <button class="quantity-btn" onclick="changeQuantity(1)">+</button>
                </div>
                <button class="add-to-cart-btn" onclick="addToCart()">加入购物车</button>
            </div>
        </div>
    </div>
</div>

<!-- 购物车按钮 -->
<div class="cart-btn" onclick="toggleCart()">
    <div class="cart-icon">🛒</div>
    <div class="cart-badge" id="cartBadge">0</div>
</div>

<!-- 购物车侧边栏 -->
<div class="cart-sidebar" id="cartSidebar">
    <div class="cart-header">
        <div class="cart-title">购物车</div>
        <div class="cart-close" onclick="toggleCart()">&times;</div>
    </div>
    <div class="cart-items" id="cartItems">
        <div class="empty-cart">购物车为空</div>
    </div>
    <div class="cart-footer">
        <div class="cart-total">
            <span>总计：</span>
            <span id="cartTotal">￥0.00</span>
        </div>
        <button class="checkout-btn" onclick="checkout()">结算</button>
    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script>
// 购物车数据
let cart = [];
let currentProduct = null;

$(function(){
    
    // 点击弹窗外部关闭
    $('.modal-overlay').click(function(e) {
        if (e.target === this) {
            closeProductModal();
        }
    });

    // 数量输入框变化
    $('#modalQuantity').on('input', function() {
        let value = parseInt($(this).val());
        if (value < 1) $(this).val(1);
        if (value > currentProduct.stock) $(this).val(currentProduct.stock);
    });
    
});

// 显示商品详情弹窗
function showProductDetail(id, name, price, origin, level, year, stock, desc) {
    currentProduct = {
        id: id,
        name: name,
        price: price,
        origin: origin,
        level: level,
        year: year,
        stock: stock,
        desc: desc
    };
    
    $('#modalProductName').text(name);
    $('#modalProductPrice').text('￥' + price + ' / 500g');
    $('#modalProductDesc').text(desc);
    $('#modalProductOrigin').text(origin);
    $('#modalProductLevel').text(level);
    $('#modalProductYear').text(year + '年');
    $('#modalProductStock').text(stock);
    $('#modalQuantity').val(1);
    
    $('#productModal').css('display', 'flex');
    // 添加动画类
    setTimeout(() => {
        $('#productModal').addClass('show');
    }, 10);
}

// 关闭商品详情弹窗
function closeProductModal() {
    $('#productModal').removeClass('show');
    setTimeout(() => {
        $('#productModal').css('display', 'none');
        currentProduct = null;
    }, 300);
}

// 改变数量
function changeQuantity(delta) {
    let input = $('#modalQuantity');
    let currentValue = parseInt(input.val());
    let newValue = currentValue + delta;
    
    if (newValue >= 1 && newValue <= currentProduct.stock) {
        input.val(newValue);
    }
}

// 添加到购物车
function addToCart() {
    if (!currentProduct) return;
    
    let quantity = parseInt($('#modalQuantity').val()) || 1;
    let existingItem = cart.find(item => item.id === currentProduct.id);
    
    if (existingItem) {
        existingItem.quantity = parseInt(existingItem.quantity) + quantity;
        if (existingItem.quantity > currentProduct.stock) {
            existingItem.quantity = parseInt(currentProduct.stock);
        }
    } else {
        cart.push({
            id: currentProduct.id,
            proname: currentProduct.name,
            price: parseFloat(currentProduct.price) || 0,
            origin: currentProduct.origin,
            level: currentProduct.level,
            year: parseInt(currentProduct.year) || 0,
            stock: parseInt(currentProduct.stock) || 0,
            desc: currentProduct.desc,
            quantity: quantity
        });
    }
    
    updateCartDisplay();
    closeProductModal();
    
    // 显示添加成功提示
    ElementPlus.ElMessage.success('已添加到购物车！');
}

// 更新购物车显示
function updateCartDisplay() {
    let totalItems = cart.reduce((sum, item) => sum + (parseInt(item.quantity) || 0), 0);
    let totalPrice = cart.reduce((sum, item) => sum + ((parseFloat(item.price) || 0) * (parseInt(item.quantity) || 0)), 0);
    
    $('#cartBadge').text(totalItems);
    $('#cartTotal').text('￥' + totalPrice.toFixed(2));
    
    if (cart.length === 0) {
        $('#cartItems').html('<div class="empty-cart">购物车为空</div>');
    } else {
        let html = '';
        for (let i = 0; i < cart.length; i++) {
            let item = cart[i];
            html += '<div class="cart-item">';
            html += '<div class="cart-item-img">';
            html += '<img src="images/yellow-tea-2443920_1280.jpg" alt="茶叶图片">';
            html += '</div>';
            html += '<div class="cart-item-info">';
            html += '<div class="cart-item-name">' + (item.proname || '') + '</div>';
            html += '<div class="cart-item-price">￥' + (item.price || 0) + ' / 500g</div>';
            html += '<div class="cart-item-quantity">数量：' + (item.quantity || 0) + '</div>';
            html += '<div class="cart-item-remove" onclick="removeFromCart(' + i + ')">删除</div>';
            html += '</div>';
            html += '</div>';
        }
        $('#cartItems').html(html);
    }
}

// 切换购物车显示
function toggleCart() {
    $('#cartSidebar').toggleClass('open');
}



// 从购物车移除商品
function removeFromCart(index) {
    ElementPlus.ElMessageBox.confirm('确定要删除这个商品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        cart.splice(index, 1);
        updateCartDisplay();
        ElementPlus.ElMessage.success('商品已删除');
    }).catch(() => {
        // 用户取消删除
    });
}

// 结算
function checkout() {
    if (cart.length === 0) {
        ElementPlus.ElMessage.warning('购物车为空！');
        return;
    }
    
   
    // 使用Ajax发送购物车数据到后端
    $.ajax({
        url: 'ShoppingToOrderServlet',
        type: 'POST',
        data: {
            cart: JSON.stringify({
                carts: cart
            })
        },
        dataType: 'json',
        success: function(response) {
                ElementPlus.ElMessage.success('订单提交成功');
                // 清空购物车
                cart = [];
                updateCartDisplay();
                // 关闭购物车侧边栏
                $('#cartSidebar').removeClass('open');
        },
        error: function(xhr, status, error) {
            ElementPlus.ElMessage.error('网络错误，请稍后重试');
        }
    });
}
</script>
</body>
</html>